@charset "utf-8";
.position-margin{
    position:absolute;
    margin:0 auto;
    left:0;
    right:0;
}

//page02部分开始
.page02{
    position:relative;
    overflow: hidden;
    //page02-border部分开始
    .page02-border{
        img{
            @extend .position-margin;
            top:70px;
            transform: translateY(-120%);
        }           
    }
    //page02-border部分开始
    
    //content-border部分开始
    .content-border{
        position:relative;
        width:153px;
        height:347px;
        margin:0 auto;
        top:70px;
    }
    //content-border部分结束
    
    //mother人物部分开始
    .page02-mother{
        img{
            @extend .position-margin;
            left:100%;
            top:174px;
        }
        
    }
    
    //mother人物部分结束
    //mother话语1开始
    .page02-mother-speech01{
        img{
            @extend .position-margin;
            left:100%;
            //170
            top:242px;
            transform: rotateZ(25deg);
         
        }
    }
    //mother话语1结束
    
    //儿子人物部分开始
    .page02-mother-son{
        position:absolute;
//      left:-70px;
        left:500%;
        top:145px;      
    }
    //儿子人物部分结束
    //手机部分开始
    .page02-phone{
        @extend .position-margin;
        top:244px;    
//      left:-30px; 
        left:500%;
    }
    //手机部分结束
    //mother话语1开始
    .page02-mother-speech02{
        img{
            @extend .position-margin;
            top:20px;
         
        }
    }
    //mother话语1结束
    //mother话语02部分开始
    .page02-mother-speech02{
       @extend .position-margin;
//     top:-50px;
       left:-60px;
       top:-100%;
        
    }
    //mother话语02部分结束
    
    //花部分开始
    .page02-mother-flower{
       @extend .position-margin;
       top:70px;
       left:-20px;
       opacity: 0;
    }
    //花部分结束
     //title部分开始
    .page02-mother-title{
        @extend .position-margin;
        width:250px;
        height:30px;
        background: #0D1744;
        color:white;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        top:370px;
//      left:-90px;       
        left:-500%;
        opacity: 0;
    }
    //title部分开始
    
    
}




.page02.active{
    .page02-border{
        img{
            animation: page02-border 400ms ease 200ms  forwards;
        }              
    }
    //mother人物部分开始
    .page02-mother{
        img{
            animation: page02-mother 400ms ease 500ms forwards;
        }
        
    }
    //mother人物部分结束
    
     //mother话语1开始
    .page02-mother-speech01{
        img{
            animation:page02-mother-speech01 400ms ease 500ms forwards ;        
        }
    }
    //mother话语1结束
    .page02-mother-son{
        animation:page02-mother-son 400ms ease 500ms forwards ;         
    }
    //儿子人物部分结束
    //手机部分开始
    .page02-phone{
        animation:page02-phone 400ms ease 500ms forwards ; 
    }
    //手机部分结束
    
    //mother话语02部分开始
    .page02-mother-speech02{
        animation:page02-mother-speech02 400ms ease 1s forwards ;        
    }
    //mother话语02部分结束
    
    //花部分开始
    .page02-mother-flower{
        animation:page02-mother-flower 400ms ease 1.5s forwards ;   
    }
    //花部分结束
    
    //title部分开始
    .page02-mother-title{
        animation:page02-mother-title 400ms ease 2.2s forwards ;       
    }
    //title部分开始
    

    
    

}


//page02-border动画部分开始
@keyframes page02-border{
    0%{}
    40%{
       transform: translateY(0) ;
    }
    80%{
        transform: translateY(-20px);
    }
    100%{
        transform: translateY(0) ;
    }
}
//page02-border动画部分开始

//mother人物部分开始
@keyframes page02-mother{
    0%{}
    40%{
       left:-10px
    }
    80%{
       left:52px
    }
    100%{
       left:36px;
    }
}
//mother人物部分结束

//mother言语01部分开始
@keyframes page02-mother-speech01{
    0%{}
    40%{
       left:150px
    }
    80%{
       left:190px
    }
    100%{
       left:170px;
    }
}
//mother言语01部分结束

//儿子部分开始
@keyframes page02-mother-son{
    0%{}
    40%{
       left:-90px;
    }
    80%{
       left:-50px;
    }
    100%{
       left:-70px;
    }
}
//儿子部分结束

//phone部分开始
@keyframes page02-phone{
    0%{}
    40%{
       left:-40px
    }
    80%{
       left:-20px
    }
    100%{
       left:-30px;
    }
}
//phone部分结束

//mother言语02部分开始
@keyframes page02-mother-speech02{
    0%{}
    40%{
       top:-60px
    }
    80%{
       top:-80px
    }
    100%{
       top:-60px;
    }
}
//mother言语02部分结束

//花部分开始
@keyframes page02-mother-flower{
    0%{opacity: 1;transform: scale(1.1);}
    20%{opacity: 1;transform: scale(1);}
    40%{opacity: 1;transform: scale(1.1);}
    60%{opacity: 1;transform: scale(1);}
    80%{opacity: 1;transform: scale(1.1);}
    100%{opacity: 1;transform: scale(1);}
}
//花部分结束

//title部分开始
@keyframes page02-mother-title{
    0%{}
    25%{opacity:1;left:-25px;}
    50%{opacity:1;left:-55px;}
    75%{
        opacity:1;left:-35px;
    }
    100%{
        opacity:1;left:-45px;
    }
    
}
//title部分结束

//page02部分结束
